<!--
*  功能描述：项目关联合同
 -->
 <template>
  <div>
      
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >查询项目关联合同</el-tag
    >
    <el-form :inline="true" :model="server" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="server.ProjectName" placeholder="项目名称"></el-input>
        </el-form-item>
        <el-form-item label="合同关联">
          <el-select v-model="server.ProjectConId" clearable placeholder="合同关联">
            <el-option
              v-for="item in data"
              :key="item.ContractId"
              :value="item.ContractId"
              :label="item.ContractName"
              >{{ item.ContractName }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">查询</el-button>
          <el-button type="primary" @click="Excel" style="background-color:red">导出excel</el-button>
        </el-form-item>
      </el-form>
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >项目关联合同列表</el-tag
    >
    <div>
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="ProjectId"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="ProjectName"
      label="项目名称">
    </el-table-column>
    <el-table-column
      prop="CName"
      label="合同信息">
    </el-table-column>
    <el-table-column
      prop="ProjectBuildtype"
      label="建筑类别">
    </el-table-column>    
    <el-table-column
      prop="ProjectPrice"
      label="合同额（万元）">
    </el-table-column>
    <el-table-column prop="ProjectStartTime" label="开始时间">
            <span slot-scope="scope">{{
              dateFormat("YYYY-mm-dd", scope.row.ProjectStartTime)
            }}</span>
          </el-table-column>
    <el-table-column prop="ProjectEndTime" label="结束时间">
            <span slot-scope="scope">{{
              dateFormat("YYYY-mm-dd", scope.row.ProjectEndTime)
            }}</span>
          </el-table-column>
    <el-table-column label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.ProjectId)" type="text" size="small"
              >关联合同</el-button
            >
          </template>
          </el-table-column>
  </el-table>
  <el-pagination style="text-align: center;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[8,15,20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
        dataxl:[],
        data:[],
        tableData:[],
        pageindex:1,
        pagesize:8,
        totalCount:0,
        pid:0,
        dialogVisible:false,
        server: {
        ProjectName: "",
        ProjectConId:"",
      },
    };
  },
  methods: {
    onsubmit(){
      this.ShowConpro();
    },
      handleClick(ProjectId){
        this.$router.push({
        path: '/editConPro',
        name: 'EditConPro',
        params: {
          ProjectId: ProjectId
        }
      })
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.ShowConpro();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.ShowConpro();
    },
    Excel() {
        window.open("Operation/GetProExcel")
    },
    Xl() {
      this.$http({
        url: "Operation/SelCon",
        method: "Get",
      }).then((res) => {
        this.data = res.data;
        console.log(this.data);
      });
    },
    ShowConpro(){
            this.$http({
        url: "Operation/ShowConPro",
        method: "Get",
        params: {
          pageindex: this.pageindex,
          pagesize: this.pagesize,
          ProjectName:this.server.ProjectName,
          ProjectConId:this.server.ProjectConId
        },
      }).then((res) => {
        (this.tableData = res.data.Data),
          (this.totalCount = res.data.totalCount);
      });
        },
        //时间转换
    dateFormat(fmt, date) {
      let ret = "";
      date = new Date(date);
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
        
  },
  created() {
    this.ShowConpro();
    this.onsubmit();
    this.Xl();
  },
};
</script>